<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css"  media="all">
    <script src="./js/jquery-1.12.4.min.js"></script>

</head>
<body>

<div class="layui-row">
    <div class="layui-col-xs4">
        <div class="layui-carousel" id="test1" lay-filter="test1" >
            <div carousel-item>
                <div><a href="javascript:void(0);" onclick="play_1()"><img src="./img/bunengshuodemimi.jpg"/></a></div>
                <div><a href="javascript:void(0);" onclick="play_2()"><img src="./img/xiulianaiqing.jpg"/></a></div>
                <div><a href="javascript:void(0);" onclick="play_3()"><img src="./img/5Za855e7crireBgl.jpg"/></a></div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs7">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>欢迎使用zjj的音乐网站!</legend>
        </fieldset>
        <ul class="layui-timeline" style="float: left">
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f</i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">6月1日，完成</div>
                </div>
            </li>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f</i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">5月27日，完成登录功能</div>
                </div>
            </li>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f</i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">5月23日，完成前台基本页面，前后端json交互，音乐播放</div>
                </div>
            </li>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f</i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">5月19日，完成数据库设计，后台CRUD</div>
                </div>
            </li>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f</i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">5月16日，开始制作此网站</div>
                </div>
            </li>
        </ul>
    </div>
</div>
<blockquote class="layui-elem-quote ">本网站音乐仅供学习使用，版权归原作者所有，请勿传播。</blockquote>


<script src="./layui/layui.js"></script>
<script>
    play_1 = function (){
        localStorage["playingId"] = 26;
        localStorage["playingName"] = '不能说的秘密';
        localStorage["playingSinger"] = '周杰伦';
        localStorage["playingImgPath"] = 'bunengshuodemimi.jpg';
        localStorage["playingMusicPath"] = 'bunengshuodemimi.mp3';
    }
    play_2 = function (){
        localStorage["playingId"] = 32;
        localStorage["playingName"] = '修炼爱情';
        localStorage["playingSinger"] = '林俊杰';
        localStorage["playingImgPath"] = 'xiulianaiqing.jpg';
        localStorage["playingMusicPath"] = 'xiulianaiqing.mp3';
    }
    play_3 = function (){
        localStorage["playingId"] = 34;
        localStorage["playingName"] = '她说';
        localStorage["playingSinger"] = '林俊杰';
        localStorage["playingImgPath"] = '5Za855e7crireBgl.jpg';
        localStorage["playingMusicPath"] = 'Ai4XJyqBwkmw2u4z.mp3';
    }
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: 300 //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
</body>
</html>